<style>
    .question-option-list {
        position: relative;
    }

    .question-option-list .item {
        margin-bottom: 10px;
        position: relative;
    }

    .question-option-list .layui-input-block {
        margin-left: 0;
        margin-right: 80px;
    }

    .question-option-list .iconfont {
        display: inline-block;
        box-sizing: border-box;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 22px;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
    }

    /*.question-option-list .icon-jia{*/
    /*color: #1E9FFF;*/
    /*border: 1px solid #1E9FFF;*/
    /*}*/
    .question-check {
        float: right;
        position: relative;
        margin-right: 15px;
    }

    .question-check .layui-form-checkbox {
        margin-right: 30px;
    }

    .question-del {
        position: absolute;
        top:8px;
        right:5px;
    }

    .question-del .iconfont {
        color: #CC3333;
        border: 1px solid #CC3333;
        cursor: pointer;
    }

</style>


<div class="sm-pop">
    <div id="dialog_form" class="layui-form">

        <input type="hidden" name="paperQuestionId" value="<%=id%>">
        <input type="hidden" name="questionType" value="<%=questionType%>">

        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>题型</label>
            <div class="layui-input-block">
                <select name="questionType" lay-filter="question_type" lay-verify="required">
                    <option value="1" selected>单选</option>
                    <option value="2">多选</option>
                    <option value="3">判断</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>题目</label>
            <div class="layui-input-block">
                <textarea id="questionContent" name="questionContent" maxlength="900" class="layui-textarea"><%=questionContent%></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>选项</label>
            <div class="layui-input-block ">
                <div class="question-option-list">
                    <div class="item">
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" placeholder="请输入选项" lay-verify="required">
                        </div>
                    </div>
                    <div class="item">
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" placeholder="请输入选项" lay-verify="required">
                        </div>
                    </div>
                    <div class="item">
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" placeholder="请输入选项" lay-verify="required">
                        </div>
                    </div>
                    <div class="item">
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" placeholder="请输入选项" lay-verify="required">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal layui-btn-sm" id="option_add">
                    <i class="iconfont icon-jia"></i>添加选项
                </button>
            </div>
        </div>


    </div>
</div>
<script>
    layui.use(['form'], function () {

        var form = layui.form;
        form.render();

        var type = "1";//[check,radio,judge]
        var $addBtn = $("#option_add");
        var $optionList = $(".question-option-list");

        var TEMP = {
            check: function (p) {
                var temp = '<div class="item">'
                    + (p && p.del ? '<div class="question-del"><i class="iconfont icon-sub"></i></div>' : '')
                    + '<div class="layui-input-block"><input type="text" data-id="' + (p && p.id ? p.id : "") + '" class="layui-input" placeholder="请输入选项" lay-verify="required" value="' + (p && p.optionContent ? p.optionContent : "") + '"></div>'
                    + '</div>';
                return temp;
            },
            radio: function (p) {
                var temp = '<div class="item">'
                    + (p && p.del ? '<div class="question-del"><i class="iconfont icon-sub"></i></div>' : '')
                    + '<div class="layui-input-block"><input type="text" data-id="' + (p && p.id ? p.id : "") + '"  class="layui-input" placeholder="请输入选项" lay-verify="required" value="' + (p && p.optionContent ? p.optionContent : "") + '"></div>'
                    + '</div>';
                return temp;
            },
            judge: function (p) {
//                var temp = '<div class="item">'
//                    + '<input type="radio" name="answer" data-id="' + (p && p.id ? p.id : "") + '" value="1" title="正确" '+(!p || (p && p.isAnswer)!=0?'checked':'')+'>'
//                    + '<input type="radio" name="answer" data-id="' + (p && p.id ? p.id : "") + '" value="0" title="错误" '+(p && p.isAnswer==0?'checked':'')+'>'
//                    + '</div>';
//                return temp;
            }
        };


        form.on('select(question_type)', function (data) {
            type = data.value;
            $optionList.empty();
            if (type == "1") {
                $optionList.append(template.render(TEMP.radio(), {}));
                $optionList.append(template.render(TEMP.radio(), {}));
                $optionList.append(template.render(TEMP.radio(), {}));
                $optionList.append(template.render(TEMP.radio(), {}));
                $addBtn.show();
            } else if (type == "2") {
                $optionList.append(template.render(TEMP.check(), {}));
                $optionList.append(template.render(TEMP.check(), {}));
                $optionList.append(template.render(TEMP.check(), {}));
                $optionList.append(template.render(TEMP.check(), {}));
                $addBtn.show();
            } else if (type == "3") {
//                $optionList.append(template.render(TEMP.judge(), {}));
//                $addBtn.hide();

                //$(".layui-form-item:eq(2)").hide();
                $addBtn.parent().parent().hide();
            }
            form.render();
        });

        //增加选项
        $addBtn.click(function () {
            if(type=="1"){
                $optionList.append(template.render(TEMP.radio({del: true}), {}));
            }else if(type=="2"){
                $optionList.append(template.render(TEMP.check({del: true}), {}));
            }
            form.render();
        });

        //删除选项
        $(".question-option-list").on("click", ".question-del i", function () {
            var $item = $(this).parent().parent();
            $item.remove();
        });


        var paperQuestionId = $("input[name='paperQuestionId']").val();
        if (paperQuestionId) {
            type = $("input[name='questionType']").val();
            $("#dialog_form select[name='questionType']").val(type);
            $optionList.empty();
            type=="3" && $addBtn.hide();
            form.render("select");
            $.ajax({
                type: "GET",
                url: '/paperquestion/getOptionListByPaperQuestionId',
                data: {"paperQuestionId": paperQuestionId},
                success: function (result) {
                    console.log(result);
                    if (result.success && result.data) {
                        if(type=="1"){
                            for (var i = 0; i < result.data.length; i++) {
                                i>3 && (result.data[i].del=true);
                                $optionList.append(template.render(TEMP.radio(result.data[i]),{}));
                            }
                        }else if(type=="2"){
                            for (var i = 0; i < result.data.length; i++) {
                                i>3 && (result.data[i].del=true);
                                $optionList.append(template.render(TEMP.check(result.data[i]),{}));
                            }
                        }else{
//                            var html='<div class="item">';
//                            $.each(result.data,function (_,v) {
//                                html+='<input type="radio" name="answer" data-id="' + (v.id ? v.id : "") + '" value="0" title="'+v.optionContent+'" '+(v.isAnswer==1?'checked':'')+'>';
//                            });
//                            html+='</div>';
//                            $optionList.append(template.render(html,{}));

                            //$(".layui-form-item:eq(2)").hide();
                            $addBtn.parent().parent().hide();
                        }
                        //表单重新渲染
                        form.render();
                    }
                },
            })
        }
    })
</script>